<template>
  <view class="page-container">

    <!-- 动态模块 -->
    <view class="dynamic-list" v-if="newsList.length > 0">
      <view class="dynamic-item" v-for="(item, index) in newsList" :key="item.id" @click="goDynamic(item)">
        <image class="dynamic-img" :src="item.thumb" mode="widthFix"></image>
        <view class="dynamic-desc">{{item.title}}</view>
      </view>
    </view>

  </view>
</template>

<script>
export default {
  data() {
    return {
      newsList: []
    }
  },
  onLoad() {
    this.fetchNews();
  },
  methods: {
    async fetchNews() {
      try {
        const res = await uni.request({
          url: 'http://chaoxiang.scoringchina.com/index/api/news',
          method: 'GET'
        });
        if(res && res.data && res.data.code === 1) {
          this.newsList = res.data.data;
        } else {
          console.error('获取新闻数据失败', res[1]);
        }
      } catch (error) {
        console.error('请求异常', error);
      }
    },

    goDynamic(item) {
      console.log('--------2-----------', item);
                        window.open(item.link_url);

      // uni.navigateTo({
      //   url: '/pages/web/index?title=' + encodeURIComponent(item.title) + '&url=' + encodeURIComponent(item.url)
      // });
    }
  }
}
</script>

<style>
.page-container {
  display: flex;
  flex-direction: column;
  background: #f7f7f7;
  width: 100vw;
}
.kv-img {
  width: 100vw;
  height: 320rpx;
  object-fit: cover;
  margin-bottom: 24rpx;
}
.dynamic-section {
  height: 291rpx;
  width: 94vw;
  border-radius: 24rpx;
  box-shadow: 0 4rpx 24rpx rgba(0,0,0,0.06);
  margin-bottom: 24rpx;
  position: relative;
  box-sizing: border-box;
}
.dynamic-img {
  width: 100%;
  height: 291rpx;
  border-radius: 24rpx;
}
.dynamic-item{
  position: relative;
  margin: 20rpx;
}
.dynamic-desc {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 50rpx;
  line-height: 50rpx;
  background: rgba(0, 0, 0, 0.54);
  color: white;
  border-radius: 0 0 24rpx 24rpx;
  padding-left: 10rpx;
  box-sizing: border-box;
}
.group-section {
  width: 94vw;
  display: flex;
  flex-direction: column;
  gap: 24rpx;
  margin-bottom: 200rpx;
}
.group-card {
  position: relative;
  border-radius: 20rpx;
  height: 291rpx;
  display: flex;
  align-items: flex-end;
}
.group-img {
  width: 100%;
  height: 291rpx;
  object-fit: cover;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 1;
  border-radius: 20rpx;
}
</style>
